<template>
  <div id="account_login">
    <div class="account_login_title">账号登录</div>
    <a-form
      id="loginform"
      :model="formState"
      :hideRequiredMark="true"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      :rules="rules"
      layout="vertical"
    >
      <a-form-item label="账号" name="account">
        <a-input placeholder="账号" v-model:value="formState.account">
          <template #prefix>
            <user-outlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="formState.password" placeholder="密码">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>
      </a-form-item>
      <!-- <p class="error-message" v-if="errorMessage">{{ errorMessage }}</p> -->
      <a-form-item name="remember">
        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          :disabled="accountBtn"
          :loading="accountBtn"
          class="login-form-button"
          html-type="submit"
          >登录</a-button
        >
      </a-form-item>
      <a-form-item>
        <!-- <span class="custom_btn register_btn" @click="toRegister">医院注册</span>
        <span class="custom_btn forgot_btn" @click="toForgotPass">忘记密码?</span> -->
        <span class="custom_btn register_btn">医院注册</span>
        <span class="custom_btn forgot_btn" @click="$emit('changeTab', 'forgot_password')"
          >忘记密码?</span
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { UnwrapRef } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { userLogin } from '@/axios/api/user_api'
import { encrypt } from '@/utils/cryptic_util'
import { useRoute, useRouter } from 'vue-router'
import storageUtil from '@/utils/storage_util'

interface FormState {
  account: string
  password: string
  remember?: boolean
}
const accountBtn = ref<boolean>(false)
const route = useRoute()
const router = useRouter()

const rules: Record<string, Rule[]> = {
  account: [{ required: true, message: '请输入账号', trigger: 'change' }],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码长度不得小于6位' },
    { max: 18, message: '密码长度不得大于18位' }
  ]
}
const formState: UnwrapRef<FormState> = reactive({
  account: '',
  password: '',
  remember: false
})

const onFinish = (values: any) => {
  console.log('Success:', values)
  accountBtn.value = true
  const info: FormState = {
    account: encrypt(values.account),
    password: encrypt(values.password)
  }
  userLogin(info)
    .then((res: any) => {
      if (res.code === 200) {
        let { tokenStr, userLoginInfo } = res.data
        console.log('%c [ res ]-97', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        router.push('/exam')
        storageUtil.set('token', tokenStr)
        storageUtil.set('userInfo', userLoginInfo)
      }
      accountBtn.value = false
    })
    .catch(() => {
      accountBtn.value = false
    })
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>
<style lang="scss" scoped>
#account_login {
  padding: 10px 20px;
  @include w-h-cover();
}
.account_login_title {
  width: 100%;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #fff;
  @include font_color('content_cl');
  @include border_color('content_cl');
}
#loginform .ant-form-item {
  margin-bottom: 18px;
}
#loginform .login-form-button {
  width: 100%;
}
.error-message {
  color: #ff0000;
  text-align: center;
}
.custom_btn {
  display: inline-block;
  width: 50%;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  &:hover {
    @include background_color('btn_hover_bg');
    @include font_color('btn_hover_cl');
  }
}
.register_btn {
  border-top: 3px solid #fff;
  @include border_color('primary_btn_bg');
}
.forgot_btn {
  border-bottom: 3px solid #fff;
  @include border_color('primary_btn_bg');
}
</style>
